<template>

  <div style="width: 100%;">
    <div class="content-section">
      <div class="question-content">
        {{ question.content }}
        <div v-if="question.image" style=" display: flex;  justify-content: center; margin-top: 10px; max-height: 120px;width: 100%;">
            <img :src="question.image" alt=""  style="max-height: 100%; border-radius: 12px; max-width: 100%; object-fit:contain;"/>
          </div>
      </div>
      <div class="options-section" >
        <div v-for="(option, index) in question.answerVoList" class="option-item"
          :class="{ 'correct': question.correctAnswerVo.optionIds.includes(option.id) }">
          <div style="display: flex;">
            <div class="option-key">{{ option.abc }}</div>
          <div class="option-text">{{ option.content }}</div>
        </div>

          <div v-if="question.correctAnswerVo.optionIds.includes(option.id)"  class="answer-indicator correct">
                答案
            <span class="indicator-dot"></span>
          </div>
          <!-- <i v-if="question.correctAnswerVo.optionIds.includes(option.id)" class="iconfont icon-check"></i> -->
        </div>
      </div>
    </div>
    <div class="card-footer">
      <div class="difficulty-level" :style="{ backgroundColor: getDifficultyColor(question.difficulty) }">
      </div>
      <div class="action-btns">
        <span @click.stop="toggleExplanation(question)">
          <i class="iconfont icon-info"></i> 解析
        </span>
      </div>
    </div>

    <transition name="slide">
            <div v-if="question.showExplanation" class="explanation-panel">
              <div class="explanation-title">解析说明：</div>
              <div class="explanation-text">{{ question.analysis }}</div>
            </div>
          </transition>
  </div>
  </template>

  <script setup>
  import { ref, onMounted, onBeforeMount, defineProps } from 'vue';
  const props = defineProps(["question"]);


  //        {
  //   "id": "1476737802277978114",
  //             "quId": "1476737802277978114",
  //             "quType": 2,
  //             "quTypeDictText": "多选题",
  //             "manual": "0",
  //             "answerOrder": 0,
  //             "score": 10.0,
  //             "content": "安全带，生命带。安全带的作用又哪里有哪些？",
  //             "analysis": "",
  //             "image": "http://localhost:3100/uploads/1732799122826.jpg",
  //             "subList": null,
  //             "answerVoList": [
  //                 {
  //                     "id": "1476737802282172418",
  //                     "answerId": "1476737802282172418",
  //                     "quId": "1476737802277978114",
  //                     "sort": 0,
  //                     "abc": "A",
  //                     "pathScore": 0.0,
  //                     "content": "警告　　",
  //                     "image": "",
  //                     "scoreRate": 0.0
  //                 },
  //                 {
  //                     "id": "1476737802282172419",
  //                     "answerId": "1476737802282172419",
  //                     "quId": "1476737802277978114",
  //                     "sort": 1,
  //                     "abc": "B",
  //                     "pathScore": 0.0,
  //                     "content": "记过　　",
  //                     "image": "",
  //                     "scoreRate": 0.0
  //                 },
  //                 {
  //                     "id": "1476737802282172420",
  //                     "answerId": "1476737802282172420",
  //                     "quId": "1476737802277978114",
  //                     "sort": 2,
  //                     "abc": "C",
  //                     "pathScore": 0.0,
  //                     "content": "记大过　　",
  //                     "image": "",
  //                     "scoreRate": 0.0
  //                 },
  //                 {
  //                     "id": "1476737802282172421",
  //                     "answerId": "1476737802282172421",
  //                     "quId": "1476737802277978114",
  //                     "sort": 3,
  //                     "abc": "D",
  //                     "pathScore": 0.0,
  //                     "content": "降级　　",
  //                     "image": "",
  //                     "scoreRate": 0.0
  //                 },
  //                 {
  //                     "id": "1476737802282172422",
  //                     "answerId": "1476737802282172422",
  //                     "quId": "1476737802277978114",
  //                     "sort": 4,
  //                     "abc": "E",
  //                     "pathScore": 0.0,
  //                     "content": "撤职　　",
  //                     "image": "",
  //                     "scoreRate": 0.0
  //                 },
  //                 {
  //                     "id": "1476737802282172423",
  //                     "answerId": "1476737802282172423",
  //                     "quId": "1476737802277978114",
  //                     "sort": 5,
  //                     "abc": "F",
  //                     "pathScore": 0.0,
  //                     "content": "开除　　",
  //                     "image": "",
  //                     "scoreRate": 0.0
  //                 }
  //             ],
  //             "correctAnswerVo": {
  //                 "questionId": "1476737802277978114",
  //                 "optionIds": null,
  //                 "judgmentAnswer": null,
  //                 "fillKeywords": [],
  //                 "answerVersion": 1
  //             }
  //         },


  // import QuestionBankDialog from './QuestionBankDialog.vue'



  const questions = ref([]);

  const getDifficultyColor = (level) => {
    const colors = {
      '简单': '#4CAF50',
      '中等': '#FFA726',
      '困难': '#EF5350'
    };
    return colors[level] || '#666';
  };

  const toggleSelection = (question) => {
    question.selected = !question.selected;
  };

  const toggleExplanation = (question) => {
    question.showExplanation = !question.showExplanation;
  };




  </script>

  <style scoped lang="scss">
  $primary-color: #c0f37a;
  $secondary-color: #2196F3;
  $border-radius: 8px;

  .quiz-container {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: ui-sans-serif, system-ui, sans-serif;

    font-size: 1.18cap;
  }

  .filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .compact-input {
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: $border-radius;
    position: relative;
    flex: 1;
    transition: all 0.2s;

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
    }

    &::placeholder {
      color: #999;
      font-size: 0.8rem;
    }
  }

  .filter-item {
    position: relative;
    flex: 1;

    .iconfont {
      position: absolute;
      right: 0.8rem;
      top: 50%;
      transform: translateY(-50%);
      color: #666;
      font-size: 1rem;
    }
  }

  .primary-btn {
    padding: 0.8rem 1.5rem;
    // background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
    color: white;
    border: none;
    border-radius: $border-radius;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      // background: linear-gradient(135deg, lighten($primary-color, 5%) 0%, $primary-color 100%);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }

  .questions-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }



  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .type-tag {
    background: $primary-color;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
  }

  .source-info {
    color: #666;
    font-size: 0.9rem;
  }

  .content-section {
    margin-bottom: 0.1rem;
  }

  .question-content {
    background: #f9f9f9;
    padding: 0.7rem;
    border-radius: $border-radius;
    margin-bottom: 0.7rem;
    position: relative;
  max-width: 100%;
    &::before {
      content: '';
      position: absolute;
      left: -10px;
      top: 10px;
      width: 3px;
      height: 30px;
      background: $primary-color;
    }
  }

  .content-tag {
    background: $primary-color;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.5rem;
  }

  .options-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .option-item {
    display: flex;
    align-items: center;
    padding: 0.6rem;
    background: white;
    border: 1px solid #eee;
    border-radius: $border-radius;
    transition: all 0.2s;
    position: relative;
    justify-content: space-between;

    &:hover {
      border-color: $primary-color;
    }

    &.correct {
      border-color: $primary-color;

      .option-key {
        background: $primary-color;
      }
    }
  }

  .option-key {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 3px;
    margin-right: 1rem;
  }

  .icon-check {
    color: $primary-color;
    margin-left: auto;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 1rem;
  }

  .difficulty-level {
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
  }

  .action-btns {
    color: rgba(0, 0, 0, 0.639);
    cursor: pointer;
    font-size: medium;
    font-weight: 600;
    text-decoration: 3px underline #3bd16a;

    &:hover {
      text-decoration: 3px underline #fc1307;

    }
  }

  .explanation-panel {
    padding: 1rem;
    background: #f9f9f9;
    border-radius: $border-radius;
    margin-top: 0.2rem;
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: max-height 0.3s ease-out;
  }

  .slide-enter-from,
  .slide-leave-to {
    max-height: 0;
    overflow: hidden;
  }
  .answer-indicator {
    display: flex;
    align-items: center;
    right: 0px;
    gap: 4px;
  }

  .answer-indicator.correct {
    color: #4caf50;
  }



  .indicator-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .iconfont {
    font-family: 'iconfont' !important;
    font-size: 1rem;
  }
  </style>
